<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			//初始化
			function creatXMLHttpRequest(){
				var xmlhttprequest;
				if (window.ActiveXObject) {
					try{
						xmlhttprequest = new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
					}
				} else{
					xmlhttprequest = new XMLHttpRequest();
				}
				return xmlhttprequest;
			}
			var persons;
			var cur = 0;
			function fun(){
				//1.初始化
				xhr = creatXMLHttpRequest();				
				//2.创建请求
				xhr.open("get","person1.xml",true);
				//3.发送请求
				xhr.send();
				//4.编写回调函数
				xhr.onreadystatechange = function(){
					if (xhr.readyState == 4 && xhr.status == 200) {
						var str = xhr.responseXML;
						persons = str.getElementsByTagName("person");
						document.getElementById("name").innerHTML =persons[cur].getElementsByTagName("name")[0].innerHTML;
						document.getElementById("sex").innerHTML =persons[cur].getElementsByTagName("sex")[0].innerHTML;
						document.getElementById("age").innerHTML =persons[cur].getElementsByTagName("age")[0].childNodes[0].nodeValue;
					}
				}
			}
			function fun2(){
				//1.初始化
				xhr = creatXMLHttpRequest();				
				//2.创建请求
				xhr.open("get","person2.xml",true);
				//3.发送请求
				xhr.send();
				//4.编写回调函数
				xhr.onreadystatechange = function(){
					if (xhr.readyState == 4 && xhr.status == 200) {
						var str = xhr.responseXML;
						persons = str.getElementsByTagName("person");
						document.getElementById("name").innerHTML =persons[cur].getAttribute("name");
						document.getElementById("sex").innerHTML =persons[cur].getAttributeNode("sex").nodeValue;
						document.getElementById("age").innerHTML =persons[cur].getAttributeNode("age").nodeValue;
					}
				}
			}	
			function next(){
				cur++;
				if (cur>=persons.length) {					
					cur = 0;
				}
				document.getElementById("name").innerHTML =persons[cur].getElementsByTagName("name")[0].childNodes[0].nodeValue;
				document.getElementById("sex").innerHTML =persons[cur].getElementsByTagName("sex")[0].childNodes[0].nodeValue;
				document.getElementById("age").innerHTML =persons[cur].getElementsByTagName("age")[0].childNodes[0].nodeValue;
								
			}
		</script>
	</head>
	<body>
		<h1>学生信息</h1>
		姓名：<span id="name"></span><br />
		性别：<span id="sex"></span><br />
		年龄：<span id="age"></span><br />
		<button onclick="fun()">请求数据</button>
		<button onclick="next()">下一个</button>
		<!--<hr />
		<button onclick="fun2()">请求数据</button>-->
	</body>
</html>
